<template>
  <div class="md:flex">
    <Card
      size="small"
      class="w-full !md:mt-0 !mt-4"
      :loading="loading"
      :title="title"
      :canExpan="false"
    >
      <div class="py-4 px-4 flex justify-between">
        <Icon :icon="icon" size="60" />
        <CountTo :startVal="1" :endVal="endVal" class="text-5xl" />
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { Card } from 'ant-design-vue';

defineProps({
  loading: {
    type: Boolean,
  },
  title: {
    type: String,
  },
  endVal: {
    type: Number,
  },
  icon: {
    type: String,
  },
});
</script>
